<template>
  <el-menu
    :default-active="'/index'"
    router
    mode="horizontal"
    text-color=""
    active-text-color="white"
    
    style=""
    position="relative"
    v-if="falg"
  >
    <el-menu-item v-for="(item, i) in navList" :key="i" :index="item.name" style="color: white; font-size: 17px;">
      {{ item.navItem }}
    </el-menu-item>

    <a
      href="#nowhere"
      @click="(drawer = true), getcover(), getvip()"
      type="primary"
      style="color: white; float: right; padding: 20px"
      ><el-icon><Setting /></el-icon
    ></a>
    <i
      class="el-icon-menu"
      style="float: right; font-size: 45px; color: #222; padding-top: 8px"
    ></i>

    <el-drawer
      
      title-text-color="white"
      :direction="direction"
      :before-close="handleClose"
      v-model="drawer"
      class="rtl"
      style="background-color:#0b4378;;color: white;"
      size="17%"
    >
    <h3 style="color:white;margin-top: -10%;
    margin-bottom: 7%;">个人设置</h3>
      <a href="">
        <img
          src="../../assets/vip.png"
          alt=""
          style="width: 19px; margin-left: 59%; margin-top: 0%; display: none"
          id="vip"
      /></a>
      <a href="">
        <img
          src="../../assets/novip1.png"
          alt=""
          style="width: 19px; margin-left: 59%; margin-top: 0%; display: none"
          ref="novip"
      /></a>
      <div @click="changecover">
        <span>
          <el-avatar :src="cover" @click="getusername" :size="65"></el-avatar>
        </span>
      </div>
      <chang-cover
        ref="changecover"
        @getchangecover="getchangecover"
      ></chang-cover>
      <div @click="reusername">
        <p style="color:white">{{ username }}</p>
      </div>

      <!-- <div>
          <el-button type="primary" round @click="changpassword">修改用户名</el-button>
        </div> -->
      <div>
        <span>声音</span><el-switch v-model="value1"  style="color:white">
          
        </el-switch>
      </div>
      <div>
        <el-button
          type="primary"
          class="xiugaimima"
          plain
          @click="changpassword"
          >修改密码</el-button
        >
      </div>
      <div>
        <el-button type="primary" class="tuichudenglu" plain v-on:click="finish"
          >退出登录</el-button
        >
      </div>

      <div>
        <el-button
          type="primary"
          class="zhuxiaozhanghao"
          plain
          v-on:click="logout"
          >注销账号</el-button
        >
      </div>
      <div>
        <el-button
          type="primary"
          style="  background-color: #3d6d05;
  color: white;"
          plain
          v-on:click="kefu"
          >客服</el-button
        >
      </div>

      <div class="pingjia">
        <span class="demonstration">感谢支持,来评价一下我们吧！</span>
        <el-rate v-model="value2" :colors="colors" show-text> </el-rate>
      </div>
    </el-drawer>
    <h1
      style="
        position: absolute;
        padding-top: 20px;
        /* right: 43%; */
        font-size: 20px;
        font-weight: bold;
        color: aliceblue;
        margin-top: -7.5%;
        margin-left: 4%;
      "
      class="Navtitle"
    >
      Lcz - Your Mind Palace
    </h1>
    <ResueName ref="reu"></ResueName>
    <Recover ref="rec"></Recover>
  </el-menu>
</template>
  
  <script>
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import en from "element-plus/dist/locale/en.mjs";
import ChangCover from "./ChangCover.vue";
//   import Recover from "../library/Recover.vue"
//   import ResueName from "../library/ResueName.vue";
// import axios from "axios";

export default {
  name: "NavMenu",
  indect: ["reload"],
  data() {
    return {
      navList: [
        { name: "/index", navItem: "首页" },
        { name: "/order", navItem: "购物车" },
        { name: "/bookpage", navItem: "书籍库" },
        { name: "/personalpage", navItem: "个人中心" },
      ],
      value1: true,
      drawer: false,
      direction: "rtl",
      username: "",
      userId: "",
      busdata: "",
      cover: "",
      drawer: false,
      falg: false,
      value2: null,
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"], // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
    };
  },

  components: { ChangCover },
  created() {
    this.busdata = sessionStorage.getItem("busdata");
    console.log("nav this.busdata" + this.busdata);
    if (this.busdata == 200) {
      this.falg = true;
    } else if (this.busdata === 201) {
      this.falg = false;
    }
    console.log(this.falg);
  },
  methods: {
    getcover() {
      var userid = sessionStorage.getItem("userId");
      var data = new FormData();
      data.append("userId", userid);
      this.$axios.post("/getcover", data).then((resp) => {
        if (resp.status == 200) {
          console.log(resp.data);
          this.cover = resp.data;
        }
      });
    },
    getusername() {
      this.username = sessionStorage.getItem("userName");
    },
    //作用：用户更换头像后渲染到页面上
    getchangecover() {
      this.$axios.get("/getchangecover").then((resp) => {
        this.cover = "http://101.33.228.125:8776/" + resp.data;
        console.log(resp.data);
        console.log(this.cover);
        console.log("执行了主页的getchangecover方法");
      });
    },
    //作用：显示头像上传框并识别哪位用户换头像
    changecover() {
      this.$refs.changecover.centerDialogVisible = true;
      var userid = sessionStorage.getItem("userId");
      var data = new FormData();
      data.append("userId", userid);
      this.$axios.post("/getuserId", data).then((resp) => {});
    },
    finish() {
      sessionStorage.setItem("userName", "");
      sessionStorage.setItem("userId", "");
      this.$router.replace("/login");
    },
    logout() {
      this.userId = JSON.parse(sessionStorage.getItem("userId"));
      var data = new FormData();
      data.append("userId", this.userId);
      this.$axios.post("/logout", data).then((resp) => {
        if (resp.data.code == 200) {
          this.$message({
            message: "注销成功",
            type: "success",
          });
        }
      });
      this.$router.replace("/login");
    },
    changpassword() {
      this.$router.replace("/changepassword");
    },
    kefu(){
   this.$router.replace({path:'/kefu'})
   this.drawer=false
    },
    getvip() {
      var userid = sessionStorage.getItem("userId");
      var data = new FormData();
      data.append("userId", userid);
      this.$axios.post("/getvip", data).then((resp) => {
        if (resp.data == 0) {
          this.$refs.novip.style.display = "block";
        } else {
          var vip = document.getElementById("vip");
          vip.style.display = "block";
          console.log(523);
        }
      });
    },
  },
  mounted: function () {
    this.getusername();
  },
};
</script>
  
  
<style scoped>
a {
  text-decoration: none;
}

span {
  pointer-events: none;
}
.pingjia {
  position: absolute;
  margin-top: 219%;
  margin-left: -2%;
}
.exit-account {
  position: absolute;
  margin-top: 532px;
  margin-left: -39px;
}
/* button.el-button.el-button--primary.is-round {
  position: absolute;

  margin-top: 470px;
    margin-left: -41px;

} */
.xiugaimima {
  position: absolute;
  margin-top: 175%;
  margin-left: -19%;
  background-color: #3d6d05;
  color: white;
}
.el-icon-switch-button {
  position: absolute;
  margin-left: 300px;
}
.tuichudenglu {
  position: absolute;
  margin-left: -19%;
  margin-top: 193%;
  background-color: #3d6d05;
  color: white;
}
.zhuxiaozhanghao {
  position: absolute;
  margin-left: -19%;
  margin-top: 212%;
  background-color: #3d6d05;
  color: white;
}
.el-menu {
  width: 100%;
  position: relative;
  /* margin-top: 0.1%; */
  /* margin-top: 8px; */
  height: 12%;
  margin-left: 0px;
  background-image: url(/src/assets/5.jpg);
  display: block;
  margin: 0%;
  padding: 0%;
}
.el-menu-item:hover{
  background-color: #c58c8c;
}
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    outline: 0;
    color: var(--el-menu-hover-text-color);
    background-color: #a1bf39
}
.rtl.el-drawer.open {
  right: 0;
  width: 12%;
  
}
.el-drawer{
  
  background-color:rgba(98, 175, 187, 0.668)
}
</style>
  
  